<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tfView3</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .left{
            width:120px;
            float:left;
        }
        .left ul{
            width:100%;
            background:#E0ECFF;
            list-style: none;
        }
        .left ul li{
            margin-top: 5px;
            background:#eee;
        }
        .item{
            text-align:center;
            border:1px solid #499B33;
            background:#fafafa;
            width:100px;
        }


        .right{
            float:right;
            width:600px;
        }
        .right table{
            background:#E0ECFF;
            width:100%;
        }
        .right td{
            background:#fafafa;
            text-align:center;
            padding:2px;
        }
        .right td{
            background:#E0ECFF;
        }
        .right td.drop{
            background:#fafafa;
            width:100px;
        }
        .right td.over{
            background:#FBEC88;
        }


        .assigned{
            border:1px solid #BC2A4D;
        }

    </style>
</head>
<body>
    <div  style="background-color: yellowgreen;width: 15px;height: 15px;"></div>
    <div  style="background-color: yellow;width: 15px;height: 15px;"></div>
    <div  style="background-color: red;width: 15px;height: 15px;"></div>
    <div class="dd" style="background-color: #499B33;width: 15px;height: 15px;"></div>
    <div style="width:750px;">
        <div class="left">
            <ul>
               <li><div class="item">English</div></li>
                <li><div class="item">Science</div></li>
                <li><div class="item">Music</div></li>
                <li><div class="item">History</div></li>
                <li><div class="item">Computer</div></li>
                <li><div class="item">Mathematics</div></li>
                <li><div class="item">Arts</div></li>
                <li><div class="item">Ethics</div></li>
            </ul>
        </div>
        <div class="right">
            <table>
                <tr>
                    <td class="blank"></td>
                    <td class="title">Monday</td>
                    <td class="title">Tuesday</td>
                    <td class="title">Wednesday</td>
                    <td class="title">Thursday</td>
                    <td class="title">Friday</td>
                </tr>
                <tr>
                    <td class="time">08:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">09:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">10:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">11:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">12:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">13:00</td>
                    <td class="lunch" colspan="5">Lunch</td>
                </tr>
                <tr>
                    <td class="time">14:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">15:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">16:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    $(function(){
        $('.dd').draggable({
            revert:true,
            proxy:'clone'
        });
        //拖动在左侧的学校科目
        $('.left .item').draggable({
            revert:true,
            proxy:'clone'
        });


        //放置学校科目在时间表单元格上
        $('.right td.drop').droppable({
            onDragEnter:function(){
                $(this).addClass('over');
            },
            onDragLeave:function(){
                $(this).removeClass('over');
            },
            onDrop:function(e,source){
                $(this).removeClass('over');
                if ($(source).hasClass('assigned')){
                    $(this).append(source);
                } else {
                    var c = $(source).clone().addClass('assigned');
                    $(this).empty().append(c);
                    c.draggable({
                        revert:true
                    });
                }
            }
        });
    });
</script>
</html>